<template>
	<view class="content">
		<view class="topLogo">
			<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/logo.png" mode="aspectFit" class="logoImg">
			</image>
			
		</view>
		<view class="block">
			日记~找回密码
		</view>
		<view class="block"></view>
		<input class="uni-input" placeholder="输入注册邮箱"  type="email" @blur="getEmail" inputmode="email"/>
		<input class="uni-input" placeholder="请输入邮件验证码"  type="text" v-if="isVerify" v-model="verify"/>
		<view class="block"></view>
		<button class="resertPwd" @click="sendEmail()" v-if="!isVerify">发送[重置密码]邮件</button>
		<button class="resertPwd" @click="toResetPwd()" v-if="isVerify">前往[重置密码]</button>
		<view class="block"></view>
			<button class="resertPwd" @click="reset()" >重置</button>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="content" ></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {sendEmilVeify} from '@/api/email.js'
	import {verifyRedis} from '@/api/user.js'
	export default {
		data() {
			return {
				email:"",
				isEmail:"",
				isVerify:false,
				content:"",
				key:"",
				verify:""
			};
		},
		methods:{
			reset(){
				this.isVerify = false
			},
			getEmail(event){
				this.email = event.detail.value
				let isEmail = RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/).test(this.email);
				this.isEmail = isEmail
			},
			toResetPwd(){
				verifyRedis({
					key:this.key,
					value:this.verify
				}).then(res=>{
					if(res.data.code!=200){
						this.content = "验证码错误,请重新输入";
						this.dialogToggle()
					}else{
						uni.navigateTo({
							url:"/pages/user/resetPwd?email="+this.email
						})
					}
				})
			},
			sendEmail(){
				if(this.isEmail){
					console.log(this.email)
					this.sendRevieveEmail()
				}else{
					this.content = "邮箱格式错误";
					this.dialogToggle()
				}
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			sendRevieveEmail(){
				uni.showLoading({
					title: '邮件发送中'
				});
				sendEmilVeify({
					email:this.email,
					opt:"retrieve"
				}).then(res=>{
					if(res.data.data!=null){
						uni.hideLoading();
						this.key = res.data.data
						this.isVerify = true
						console.log(this.key)
						this.content = "邮件发送成功，请输入验证码"
						this.dialogToggle()
						
					}else{
						this.content = "邮件发送失败，请重试或更换邮箱"
						uni.hideLoading();
						this.isVerify =false
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
			background-color: $bg-blue;
		}
		.content{
			.topLogo{
				width: 100%;
				height: 35vh;
				position: relative;
				.logoImg{
					width: 15vh;
					height: 15vh	;
					position: absolute;  /* 让图片绝对定位 */  
					bottom: 0;  /* 将图片定位到 `.topLogo` 的底部 */  
					left: 50%;  /* 将图片在水平方向上居中 */  
					transform: translateX(-50%);  /* 在水平方向上移动图片，使其完全居中 */ 
					opacity: 0.7;
				}
			}
			.block{
				width: 100%;
				height: 7vh;
				text-align: center;
				font-size: 2.4vh;
				color: white;
				// background-color: rebeccapurple;
				text{
					font-size: 1.4vh;
				}
				.isSurePwd{
					color: red;
					
				}
			}
			.uni-input{
					background-color: white;
					width: 70%;
					height: 5vh;
					border-radius: 7rpx;
					margin: auto;
					margin-bottom: 2vh;
					text-align: center;
					color: black;
			}
			.resertPwd{
				width: 70%;
				background-color: #559dcf;
				color: white;
			}
			
			
		}
</style>
